import { useState } from 'react';
import { Button, Dimmer, Header, Icon } from '@fomantic-react/main';

export default () => {
  const [active, setActive] = useState(false);
  return (
    <>
      <Dimmer
        dimmable={
          <div className="aa" data-a="b">
            <p>fegegerge</p>
            <p>fegegerge</p>
            <p>fegegerge</p>
            <p>fegegerge</p>
            <p>fegegerge</p>
            <p>fegegerge</p>
            <p>fegegerge</p>
            <p>fegegerge</p>
            <p>fegegerge</p>
          </div>
        }
        active={active}
        onClick={() => setActive(false)}
      >
        <Header as="h2" className="icon inverted">
          <Icon name="heart" />
          Dimmed Message!
        </Header>
      </Dimmer>
      <br />
      <Button onClick={() => setActive(!active)}>Toggle</Button>
    </>
  );
};
